<template>
  <div class="container">
    <el-dialog
      width="1650px"
      title="加工"
      :visible.sync="dialog.centerDialogVisible"
      @open="getData"
      @close="cancel"
      center
    >
      <el-table :data="goodsList" border style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="goods_name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="inp_price" label="成本价" align="center"></el-table-column>
        <el-table-column label="出库数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.inp_num"
              @blur="inp(1,scope.row.inp_num)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="箱数" align="center">
          <template slot-scope="scope">
            <el-input-number size="small" :controls="false" v-model="scope.row.qty"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="烂果数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.bad_num"
              @blur="inp(2,scope.row.bad_num)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="可卖烂果数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.can_sale_bad_num"
              @blur="inp(3,scope.row.can_sale_bad_num)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="可卖烂果单价" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.can_sale_bad_price"
              @blur="inp"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <div class="top">
        <el-select
          size="small"
          v-model="outer.value"
          :multiple="false"
          filterable
          remote
          reserve-keyword
          placeholder="请输入商品"
          :remote-method="remoteMethod"
          :loading="outer.loading"
        >
          <el-option
            v-for="item in outer.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          class="add"
          size="small"
          type="primary"
          icon="el-icon-circle-plus"
          @click="addShopping"
        >添加商品</el-button>
      </div>
      <el-table :data="formData" border style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="name" label="商品" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" align="center" width="60"></el-table-column>
        <el-table-column prop="code" label="商品编码" align="center" width="80"></el-table-column>
        <el-table-column label="产成品数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.num1"
              @blur="inp(4,scope.row.num1)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="num2" label="产成品价格" align="center" width="80"></el-table-column>
        <el-table-column prop="num8" label="原材料的数量" align="center" width="80"></el-table-column>
        <el-table-column label="单皮" align="center">
          <template slot-scope="scope">
            <el-input-number size="small" :controls="false" v-model="scope.row.num3"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="入库箱数" align="center">
          <template slot-scope="scope">
            <el-input-number size="small" :controls="false" v-model="scope.row.num4" @blur="inp"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="num5" label="箱规" align="center" width="80"></el-table-column>
        <el-table-column :label="packaging" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.num6"
              @blur="inp(5,scope.row.num6)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column :label="artificial" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="small"
              :controls="false"
              v-model="scope.row.num7"
              @blur="inp(6,scope.row.num7)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="选择供应商" align="center">
          <template slot-scope="scope">
            <el-select
              size="small"
              v-model="scope.row.inside.value"
              :multiple="false"
              filterable
              remote
              center
              reserve-keyword
              placeholder="选择供应商"
              :remote-method="insideRemoteMethod"
              :loading="scope.row.inside.loading"
              @change="getOptionId(scope)"
            >
              <el-option
                v-for="item in scope.row.inside.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleEdit(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { supplierList } from "@/api/supplier/supplierList";
import { commodityList } from "@/api/commodity/commodityList";
import { store } from "@/api/sorting/sortingList";
export default {
  props: {
    dialog: Object,
    goodsList: Array
  },
  data() {
    return {
      formData: [],
      commodityList: [],
      outer: {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      },
      supplierList: null,
      packaging: "包装费",
      artificial: "人工费"
    };
  },
  methods: {
    inp(num, val) {
      if (num == 1 && val == undefined) {
        this.goodsList[0].inp_num = 0;
      } else if (num == 2 && val == undefined) {
        this.goodsList[0].bad_num = 0;
      } else if (num == 3 && val == undefined) {
        this.goodsList[0].can_sale_bad_num = 0;
      } else if (num == 4 && val == undefined) {
        this.formData[0].num1 = 0;
        let data = this.formData[0];
        this.$set(this.formData, 0, data);
      } else if (num == 5 && val == undefined) {
        this.formData[0].num6 = 0;
        let data = this.formData[0];
        this.$set(this.formData, 0, data);
      } else if (num == 6 && val == undefined) {
        this.formData[0].num7 = 0;
        let data = this.formData[0];
        this.$set(this.formData, 0, data);
      }
      if (this.formData.length > 0) {
        if (this.goodsList[0].inp_num == 0 || this.formData[0].num1 == 0) {
          this.formData[0].num2 = 0;
          let data = this.formData[0];
          this.$set(this.formData, 0, data);
        } else {
          //计算产成品价格
          let price = this.goodsList[0].inp_num * this.goodsList[0].inp_price;
          let packPrice = this.formData[0].num6 + this.formData[0].num7;
          this.formData[0].num2 = (
            price / this.formData[0].num1 +
            packPrice
          ).toFixed(4);
          let data = this.formData[0];
          this.$set(this.formData, 0, data);
        }
      }
      //计算原材料数量
      if (this.formData.length > 0) {
        this.formData[0].num8 =
          this.goodsList[0].inp_num -
          this.goodsList[0].can_sale_bad_num -
          this.goodsList[0].bad_num;
        let data = this.formData[0];
        this.$set(this.formData, 0, data);
      } else {
        this.num8 =
          this.goodsList[0].inp_num -
          this.goodsList[0].can_sale_bad_num -
          this.goodsList[0].bad_num;
      }
      //计算箱规
      if (this.formData.length > 0) {
        if (this.formData[0].num1 == 0 && this.formData[0].num4 == 0) {
          this.formData[0].num5 = 0;
          let data = this.formData[0];
          this.$set(this.formData, 0, data);
        } else {
          if (this.formData[0].num4) {
            this.formData[0].num5 = (
              this.formData[0].num1 / this.formData[0].num4
            ).toFixed(4);
          } else {
            this.formData[0].num5 = 0;
          }

          let data = this.formData[0];
          this.$set(this.formData, 0, data);
        }
      }
    },
    //确定
    confirm() {
      if (this.formData.length == 0) {
        this.$message({
          message: "请添加商品",
          type: "info"
        });
      } else {
        let supplier = this.formData.filter(res => {
          return res.supplier_id == "";
        });
        if (supplier.length >= 1) {
          this.$message({
            message: "请选择供应商",
            type: "info"
          });
        } else {
          let outData = {
            goods_inp_details_id: this.dialog.id,
            num: this.goodsList[0].inp_num,
            qty: this.goodsList[0].qty,
            bad_num: this.goodsList[0].bad_num,
            can_sale_bad_num: this.goodsList[0].can_sale_bad_num,
            can_sale_bad_price: this.goodsList[0].can_sale_bad_price
          };
          let inpData = [];
          console.log(this.formData);
          this.formData.forEach(res => {
            inpData.push({
              goods_id: res.id, //分拣出来的商品id
              num: res.num1, //分拣出来的数量
              price: res.num2, //分拣入库的价格
              tare: res.num3, //单皮
              qty: res.num4, //入库箱数
              spec: res.num5, //箱规
              pack_cost: res.num6, //包装费
              labour_cost: res.num7, //如果费
              supplier_id: res.supplier_id, //供应商id
              source_good_num: res.num8
            });
          });

          let data = {
            sort_str: {
              out: outData,
              inp: inpData
            }
          };
          store(data).then(res => {
            if (res.code == 0) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.cancel();
              this.$emit("upData");
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          });
        }
      }
    },
    //获取修改数据
    getData() {
      let data = {
        page: 1,
        limit: 50
      };
      //获取商品列表
      commodityList(data).then(res => {
        this.outer.options = res.data.data.map(item => {
          return {
            value: `${item.id}`,
            label: `${item.name}`
          };
        });
        this.commodityList = res.data.data;
      });
      //获取供应商列表
      let datas = {
        page: 1,
        limit: 50,
        is_agriculture: 1
      };
      supplierList(datas).then(res => {
        this.supplierList = res.data.data.map(item => {
          return { value: `${item.id}`, label: `${item.name}` };
        });
      });
    },
    //获取供应商数据
    getSupplierList(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100,
        is_agriculture: 1
      };
      this.formData.forEach(result => {
        result.inside.loading = true;
      });
      supplierList(data).then(res => {
        let center = [];
        this.formData.forEach((result, index) => {
          result.inside.list = res.data.data.map(item => {
            return { value: `${item.id}`, label: `${item.name}` };
          });
          result.inside.loading = false;
          result.inside.options = result.inside.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
          this.$set(this.formData, index, result);
        });
      });
    },
    //选择供应商获取ID
    getOptionId(scope) {
      this.formData[scope.$index].supplier_id = scope.row.inside.value;
      let data = this.formData[scope.$index];
      this.$set(this.formData, scope.$index, data);
    },
    //获取商品列表
    getCommodityList(query) {
      let data = {
        goods_name: query,
        page: 1,
        limit: 100
      };
      this.outer.loading = true;
      commodityList(data).then(res => {
        this.outer.list = res.data.data.map(item => {
          return {
            value: `${item.id}`,
            label: `${item.name}`
          };
        });
        this.outer.loading = false;
        this.outer.options = this.outer.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
        this.commodityList = res.data.data;
      });
    },
    // 删除
    handleEdit(scope) {
      let id = scope.row.id;
      this.formData.forEach((res, index) => {
        if (res.id == id) {
          this.formData.splice(index, 1);
        }
      });
      this.outer = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
      this.inside = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
      this.getData();
    },
    //添加商品
    addShopping() {
      if (this.outer.value == "") {
        this.$message({
          message: "请选择商品",
          type: "info"
        });
      } else {
        let bool = this.formData.some(res => {
          return res.id == this.outer.value;
        });
        if (bool) {
          this.$message({
            message: "已添加该商品",
            type: "info"
          });
        } else {
          if (this.formData.length == 1) {
            this.$message({
              message: "已添加商品",
              type: "info"
            });
          } else {
            let commodity = this.commodityList.filter(res => {
              return res.id == this.outer.value;
            });
            commodity[0].num1 = 0;
            commodity[0].num2 = 0;
            commodity[0].num3 = 0;
            commodity[0].num4 = 0;
            commodity[0].num5 = 0;
            commodity[0].num6 = 0;
            commodity[0].num7 = 0;
            commodity[0].num8 = this.num8
              ? this.num8
              : this.goodsList[0].inp_num;
            commodity[0].supplier_id = "";
            commodity[0].inside = {
              options: this.supplierList,
              value: "",
              list: [],
              loading: false,
              id: ""
            };
            this.packaging = `包装费/${commodity[0].unit}`;
            this.artificial = `人工费/${commodity[0].unit}`;
            this.formData.push(commodity[0]);
          }
        }
      }
    },
    //搜索商品数据
    remoteMethod(query) {
      if (query !== "") {
        this.getCommodityList(query);
      } else {
        this.outer.options = [];
      }
    },
    //搜索供应商数据
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
      }
    },
    //取消
    cancel() {
      this.dialog.centerDialogVisible = false;
      this.formData = [];
      this.outer = {
        options: [],
        value: "",
        list: [],
        loading: false,
        id: ""
      };
    },

    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.getData();
    }
  }
};
</script>
<style scoped>
.top {
  margin: 5px 0;
}
.pagination {
  text-align: right;
  padding: 10px;
}
</style>